import SelectShopModal from '@/pages/OrderModule/common/bizcomponents/SelectShopModal';
import { queryShopList, queryQimenShopList } from '@/pages/OrderModule/common/bizcomponents/SelectShopModal/server';
import { useFetch } from '@/pages/OrderModule/common/hooks/useFetch';
import { DoubleLeftOutlined } from '@ant-design/icons';
import { Collapse, Select } from 'antd';
import IconFont from '@/components/IconFont';
import { useEffect, useState } from 'react';
import { useFilterFieldsConfig } from '../store';
import {orderStateFilterItem, storeFilterItem} from '@/pages/OrderModule/orderList/components/Filter/constant.js';

const { Panel } = Collapse;

/**
 * @desc: 筛选框：店铺组件
 */
export const Store = ({ value = {}, onChange }) => {
  const { checkingMap } = useFilterFieldsConfig();
  const [platformShop, setPlatformShop] = useState(value.ecStoreIdArr || []);
  const [qimenShop, setQimenShop] = useState(value.qmStoreIdArr || []);

  const { data: platformShopResp, fetch: fetchPlatformShop } = useFetch(getShopOptions, {}, false);
  const { data: qimenShopResp, fetch: fetchQimenShop } = useFetch(getQimenShopOptions, {}, false);

  useEffect(() => {
    fetchPlatformShop();
    fetchQimenShop();
  }, []);

  useEffect(() => {
    onChange({ ecStoreIdArr: platformShop, qmStoreIdArr: qimenShop });
  }, [platformShop, qimenShop]);

  function getShopOptions(data) {
    return queryShopList(data).then((res) => {
      return res?.data?.records.map((item) => {
        return { value: item.id, label: item.storeName };
      });
    });
  }

  function getQimenShopOptions(data) {
    return queryQimenShopList(data).then((res) => {
      return res?.data?.records.map((item) => {
        return { value: item.id, label: item.storeName };
      });
    });
  }

  if(Object.values(storeFilterItem).every(item => checkingMap[item] === false)) {
    return null
  }

  return (
    <>
      <Collapse
        bordered={false}
        defaultActiveKey={['store']}
        data-theme="filter"
        expandIcon={({ isActive }) => <DoubleLeftOutlined rotate={isActive ? 270 : 90} style={{ fontSize: '16px', color: '#4E5969' }} />}
        expandIconPosition="end"
      >
        <Panel header="店铺" key="store">
          {/** 平台店铺 */}
          {checkingMap.ecStoreIdArr && (
            <SelectShopModal
              multiple
              style={{ marginBottom: 8 }}
              defaultValue={value.ecStoreIdArr}
              onChange={(data) => {
                if (data) {
                  setPlatformShop(data.map((item) => item.value));
                  return;
                }

                setPlatformShop([]);
              }}
            >
              <Select
                open={false}
                mode="multiple"
                allowClear
                placeholder="请选择平台店铺"
                value={platformShop}
                options={platformShopResp}
                onClear={(e) => {
                  setPlatformShop([]);
                }}
                onDeselect={(id) => {
                  const value = platformShop;
                  const index = value.findIndex((item) => item === id);
                  value.splice(index, 1);
                  setPlatformShop(value.slice());
                }}
                clearIcon={<IconFont type="iconguanbi2fill" style={{fontSize:'14px'}} />}
              />
            </SelectShopModal>
          )}

          {/** 奇门店铺 */}
          {/* {checkingMap.qmStoreIdArr && (
            <SelectShopModal
              multiple
              defaultValue={value.qmStoreIdArr}
              modalProps={{ title: '选择奇门店铺' }}
              extraQuery={{ type: 13 }}
              onChange={(data) => {
                if (data) {
                  setQimenShop(data.map((item) => item.value));
                  return;
                }

                setQimenShop([]);
              }}
            >
              <Select
                open={false}
                mode="multiple"
                placeholder="请选择奇门店铺"
                value={qimenShop}
                options={qimenShopResp}
                allowClear
                onClear={(e) => {
                  setPlatformShop([]);
                }}
                onDeselect={(id) => {
                  const value = qimenShop;
                  const index = value.findIndex((item) => item === id);
                  value.splice(index, 1);

                  setQimenShop(value.slice());
                }}
                clearIcon={<IconFont type="iconguanbi2fill" style={{fontSize:'14px'}} />}
              />
            </SelectShopModal>
          )} */}
        </Panel>
      </Collapse>
    </>
  );
};

export default Store;
